<template>
    <page-container>
        <a-form>
            <a-row :gutter="24">
                <a-col :span="8">
                    <a-form-item label="服务器IP">
                        <a-input v-model:value="searchData.ip"></a-input>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="24" style="text-align: right">
                    <a-space>
                        <a-button type="primary" @click="refresh">查询</a-button>
                        <a-button type="default" @click="reload">刷新 </a-button>
                        <a-button type="primary" @click="saveAdd">新增 </a-button>
                        <a-popconfirm v-if="delsBtnShow" title="确认删除?" ok-text="是" cancel-text="否"
                            @confirm="delsHandle">
                            <a-button type="primary" danger :loading="delsLoading">删除 </a-button>
                        </a-popconfirm>
                    </a-space>
                </a-col>
            </a-row>
        </a-form>
        <div style="margin-top:30px"></div>


        <a-table row-key="id" :rowSelection="rowSelection" :columns="columns" :data-source="dataSource"
            :pagination="pagination" :loading="loading">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'createtime'">
                    {{ dayjs(text).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
                <template v-if="column.dataIndex === 'updatetime'">
                    {{ dayjs(text).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <a-space>
                        <a-button type="primary" size="small" :loading="delLoading" @click="saveEdit(record)">
                            编辑
                        </a-button>
                        <a-popconfirm title="确认删除?" ok-text="是" cancel-text="否" @confirm="delHandle(record.id)">
                            <a-button type="primary" size="small" danger :loading="delLoading">删除
                            </a-button>
                        </a-popconfirm>
                    </a-space>
                </template>
            </template>
        </a-table>


        <ServerSave :title="saveTitle" :formdata="fromdata" :visible="visible" :loading="saveLoading" @close="saveClose"
            @submit="save" />

    </page-container>
</template>


<script setup lang="ts">
import * as serverApi from "@/api/serverapi"
import type { Server, ServerSearch } from "@/api/serverapi"
import { pageRequest, useRequest } from "@/common/EasyRequest"
import { message, type FormInstance } from "ant-design-vue";
import type { TableProps } from "ant-design-vue/es/table/Table";
import type { Key } from "ant-design-vue/lib/table/interface";
import type { ComputedRef, InjectionKey, Ref } from "vue";
import ServerSave from "./Save.vue"
import dayjs from 'dayjs'

const columns = [
    {
        title: '编号',
        dataIndex: 'id',
        width: '100',
    },
    {
        title: '地址',
        dataIndex: 'ip',
        width: '300',
    },
    {
        title: '端口',
        dataIndex: 'port',
        width: '90',
    },
    {
        title: '用户名',
        dataIndex: 'username',
        width: '200',
    },
    {
        title: '添加时间',
        dataIndex: 'createtime',
        width: '200',
    },
    {
        title: '更新时间',
        dataIndex: 'updatetime',
        width: '150',
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: '200',
    }
];

// 多选
const delsBtnShow = ref(false)
const selectedRowKeys = ref<number[]>()
const rowSelection: ComputedRef<TableProps['rowSelection']> = computed(() => {
    return {
        onChange: (ids: Key[], rows: any[]) => {
            selectedRowKeys.value = ids as number[]
            delsBtnShow.value = ids.length > 0
        }
    }
});

// 分页列表
const searchData = ref<ServerSearch>({})
const getpage = (dto: ServerSearch) => {
    dto.ip = searchData.value?.ip
    return serverApi.getpage(dto)
}
const {
    reload,
    refresh,
    loading,
    dataSource,
    pagination
} = pageRequest(getpage)

// 删除单条
const { run: delHandle, loading: delLoading } = useRequest(serverApi.removeById, {
    manual: true,
    onSuccess: (data, params) => {
        if (data.code != 0) {
            message.error(data.msg)
            return
        }
        refresh()
        message.success(data.msg)
    }
});

// 删除多条
const remove = () => serverApi.remove(selectedRowKeys.value)
const { run: delsHandle, loading: delsLoading } = useRequest(remove, {
    manual: true,
    onSuccess: (data, params) => {
        if (data.code != 0) {
            message.error(data.msg)
            return
        }
        refresh()
        message.success(data.msg)
    }
});

// 添加编辑
const { run: saveHandle, loading: saveLoading } = useRequest(serverApi.save, {
    manual: true,
    onSuccess: (data, params) => {
        if (data.code != 0) {
            message.error(data.msg)
            return
        }
        refresh()
        message.success(data.msg)
        saveClose()
    }
});
const save = async function (formRef: Ref<FormInstance | undefined>, dto: Server) {
    const data = await saveHandle(dto)
    if (data?.code == 0) {
        formRef.value?.resetFields()
    }
}

const fromdata = reactive<Server>({})
let visible = ref(false);
let saveTitle = ref("")
const saveClose = () => { visible.value = false }
const saveShow = () => { visible.value = true }
const saveAdd = () => {
    saveTitle.value = "添加服务器"
    fromdata.id = undefined
    fromdata.ip = undefined
    fromdata.port = undefined
    fromdata.username = undefined
    fromdata.password = undefined
    saveShow()
}
const saveEdit = (d: Server) => {
    saveTitle.value = "编辑服务器"
    saveShow()
    fromdata.id = d.id
    fromdata.ip = d.ip
    fromdata.port = d.port
    fromdata.username = d.username
    fromdata.password = d.password
}
</script>
